/* flex */
.f {
  & {
    display: flex;
  }

  &-c {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-ai-c {
    display: flex;
    align-items: center;
  }

  &-j-c {
    display: flex;
    justify-content: center;
  }

  &-1 {
    flex: 1;
  }

  &-j-sa {
    display: flex;
    justify-content: space-around;
  }

  &-j-sb {
    display: flex;
    justify-content: space-between;
  }

  &-fw {
    display: flex;
    flex-wrap: wrap;
  }

  &-d-c {
    display: flex;
    flex-direction: column
  }
}

/* layout px*/
@for $i from 0 through 375 {

  // width
  .w-#{$i} {
    width: #{$i}px;
  }

  // height
  .h-#{$i} {
    height: #{$i}px;
  }

  // line-height
  .lh-#{$i} {
    line-height:#{$i}px;
  }

  // padding
  .p {
    &-#{$i} {
      padding: #{$i}px;
    }

    &t-#{$i} {
      padding-top: #{$i}px;
    }

    &r-#{$i} {
      padding-right: #{$i}px;
    }

    &b-#{$i} {
      padding-bottom: #{$i}px;
    }

    &l-#{$i} {
      padding-left: #{$i}px;
    }
  }

  // margin
  .m {
    &#{$i} {
      margin: #{$i}px;
    }

    &t-#{$i} {
      margin-top: #{$i}px;
    }

    &r-#{$i} {
      margin-right: #{$i}px;
    }

    &b-#{$i} {
      margin-bottom: #{$i}px;
    }

    &l-#{$i} {
      margin-left: #{$i}px;
    }
  }

  //border-radius
  .br {
    &-#{$i} {
      border-radius: #{$i}px;
    }

    &-#{$i} {
      border-radius: #{$i}px;
    }

    &-bl-#{$i} {
      border-bottom-left-radius:#{$i}px;
    }

    &-br-#{$i} {
      border-bottom-right-radius:#{$i}px;
    }

    &-tr-#{$i} {
      border-top-right-radius:#{$i}px;
    }

    &-tl-#{$i} {
      border-top-left-radius:#{$i}px;
    }
  }

}

//定义字体规范
.fz-l {
  font-size: 15px;
}

.fz-m {
  font-size: 13px;
}

.fz-s {
  font-size: 12px;
}

.fw-b {
  font-weight: bold;
}

//vertical-align
.va-m {
  vertical-align: middle;
}

//text-align
.ta-r {
  text-align: right;
}

.ta-l {
  text-align: left;
}

.ta-c {
  text-align: center;
}

//display
.d-i {
  display: inline;
}

.d-ib {
  display: inline-block;
}

.d-b {
  display: block;
}

//padding
.p-0 {
  padding: 0px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.pr-0 {
  padding-right: 0px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}

.pt-0 {
  padding-top: 0px !important;
}

//overflow
.o-h {
  overflow: hidden;
}

.o-s {
  overflow: scroll;
}

.ox-s {
  overflow-x: scroll;
}

.oy-s {
  overflow-x: scroll;
}

// position
.ps-f {
  position: fixed;
}

.ps-a {
  position: absolute;
}

.ps-r {
  position: relative;
}

.ps-l-0 {
  left: 0;
}

.ps-r-0 {
  right: 0;
}

.ps-t-0 {
  top: 0;
}

.ps-b-0 {
  bottom: 0;
}

* {
  box-sizing: border-box;
}